<template>
  <div class="tag-classify">
    <SelfAdaption v-for="tagArr of tagTree" :key="tagArr.id">
      <template v-slot:title>
        {{tagArr.name}}
      </template>
      
      <template v-slot:selfBoxs>
        <SelfBox class="self-adaption-son" v-for="data of tagArr.tag_models" :key="data.id" :info="{
          insert: data.name,
          backgroundImage: data.cover_url,
          outsert: data.title
        }" :to="{name: 'TagDisplay', params: {tagId: data.id}}">
        </SelfBox>
      </template>
    </SelfAdaption>
  </div>
</template>

<script>
  import SelfBox from '__COMPONENTS__/self_adaption/SelfBox.vue'
  import SelfAdaption from '__COMPONENTS__/self_adaption/SelfAdaption.vue'
  import { GET_TAG_TREE} from '__STORE__/operation-type'
  export default {
    name: 'TagClassify',
    data: () => ({
      tagTree: []
    }),
    components: {
      SelfAdaption,
      SelfBox
    },
    methods: {
      async getTags() {
        try {
          this.$Loading.show()
          const dataRsource = this.$store.state.globalConfig
          //如果没有等待 获取数据
          if(!dataRsource.tagTree ) await this.$store.dispatch(GET_TAG_TREE)
          this.$Loading.hidden()
          //成功获取数据
          const tagclasses = dataRsource.tagTree 
          this.tagTree = Object.freeze(tagclasses)
        }catch(e) {
          console.log(e.message)
        }
      }
    },
    mounted() {
      this.getTags()
    }
  }
</script>

<style lang="less">
  @import url('__CSS__/tag_classify/tag_classify.less');
</style>